import React from 'react'
import { connect } from 'dva'
import { Card, Row, Col, Spin } from 'antd'



/**
 * 子组件
 * BrinsonTree
 */
import TheTree from '../../../components/TheTree'
const BrinsonTree = ({ fieldList = [], data = {} }) => {
    const obj = fieldList.find(item => item.name === '股票收益')
    const myProps = {
        width: '100%'
    }
    if (obj) {
        myProps.data = [
            {
                id: 'gpsy',
                title: '股票收益',
                value: data[fieldList.find(item => item.name === '股票收益').id].toPercent(),
                pid: null,
            },
            {
                id: 'jzsy',
                title: '基准收益',
                value: data[fieldList.find(item => item.name === '基准收益').id].toPercent(),
                pid: 'gpsy',
            },
            {
                id: 'cesy',
                title: '超额收益',
                value: data[fieldList.find(item => item.name === '超额收益').id].toPercent(),
                pid: 'gpsy',
            },
            {
                id: 'zcpz',
                title: '资产配置',
                value: data[fieldList.find(item => item.name === '资产配置').id].toPercent(),
                pid: 'cesy',
            },
            {
                id: 'ggxz',
                title: '个股选择',
                value: data[fieldList.find(item => item.name === '个股选择').id].toPercent(),
                pid: 'cesy',
            },
            {
                id: 'jhsy',
                title: '交互收益',
                value: data[fieldList.find(item => item.name === '交互收益').id].toPercent(),
                pid: 'cesy',
            }
        ]
    }


    return (
        <div className={`chart org`}>
            <TheTree {...myProps} />
        </div>

    )
}


/**
 * 子组件
 * BrinsonCharts 图表
 */
import { IECharts } from '../../../components'
// import echarts from 'echarts'
const BrinsonCharts = ({
    fieldList = [],
    data = {},
    //color = ['#5081BD', '#E9C87A', '#5AB1EF', '#FFB980', '#D87A80', '#8D98B3']
    color = ['#7ed321', '#4a90e2', '#5AB1EF', '#FFB980', '#D87A80', '#8D98B3']
}) => {
    const datas = []
    const names = ["超额收益", "资产配置", "个股选择", "交互收益"]
    names.map(item => {
        if (fieldList.find(it => it.name === item)) {
            const obj = fieldList.find(it => it.name === item)
            if (obj) {
                datas.push(data[obj.id]*100)
            }

        }
    })


    const myProps = {
        option: {
            title: {
                text: '股票归因',
                left: 20,
                textStyle: {
                    color: '#4a4a4a',
                    fontSize: 14,
                    lineHeight: 20,
                    fontWeight: 'bold'
                }
            },
            tooltip : {
                trigger: 'axis',
                formatter: function (params) {
                    // var tar;
                    // if (params[1].value != '-') {
                    //     tar = params[1];
                    // }
                    // else {
                    //     tar = params[0];
                    // }
                    // return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                    return `${params[0].name}:${(params[0].value/100).toPercent()}`
                }
            },
            xAxis: {
                data: names,
                splitLine: { show: false },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#999'
                    }
                },
                axisTick: { show: false },
                axisLabel: {
                    textStyle: {
                        // color: '#999',
                        // fontSize: 12,
                        // lineHeight: 17
                        color: '#4a4a4a',
                        fontSize: 14,
                        lineHeight: 20
                    }
                }
            },
            yAxis: {
                // name: '%',
                axisLabel: {
                    textStyle: {
                        // color: '#999',
                        // fontSize: 12,
                        // lineHeight: 17
                        color: '#4a4a4a',
                        fontSize: 14,
                        lineHeight: 20
                    },
                    formatter: '{value} %' 
                },
                splitLine: { show: false },
                axisLine: { show: false },
                axisTick: { show: false },
            },

            series: [
                {
                    name: 'bar',
                    type: 'bar',
                    stack: 'one',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                return color[params.dataIndex]
                            },
                        },
                    },
                    data: datas
                }
            ]
        }
    }
    return (
        <div style={{ height: 300 }} >
            <IECharts {...myProps} resizable={true} />

        </div >
    )
}

/**
 * 主组件
 * Brinson 
 * 引用组件
 * BrinsonTree 树形图
 * BrinsonCharts 股票归因柱形图
 */
class Brinson extends React.Component {
    state = {
        data: this.props.brinson,
    }
    componentDidMount() {
        // 请求数据
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {
        // 当输入改变时，重新请求数据
        if ((nextProps.lPortId !== this.props.lPortId) || (nextProps.cBenchCode !== this.props.cBenchCode) || (nextProps.timeRange !== this.props.timeRange)) {
            this.fetchData(nextProps)
        }
        // 当输出改变时，重新设置state.data
        if (nextProps.brinson !== this.props.brinson) {
            this.setState({
                data: nextProps.brinson,
            })
        }
    }
    // 请求数据方法
    fetchData = (props) => {
        this.setState({
            data: null
        })
        props.dispatch({
            type: 'combinatorialAnalysis/getBrinson',
            payload: props
        })
    }
    render() {

        return (
            <Card title='股票归因模型-Brinson' className={this.props.className} style={{ marginRight: '-7.5px', marginLeft: '-7.5px' }}>
                {
                    this.state.data ? (
                        <Row>
                            <Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ paddingRight: 10 }}>
                                <BrinsonTree {...this.state.data} />
                            </Col>
                            <Col xs={24} sm={24} md={12} lg={12} xl={12} style={{ paddingLeft: 10 }}>
                            <BrinsonCharts {...this.state.data} />
                            </Col>
                        </Row>
                    ) : (
                            <Row>
                                <Col><Spin /></Col>
                            </Row>
                        )
                }
            </Card>
        )
    }
}

Brinson.defaultProps = {
    lPortId: null,
    cBenchCode: null,
    timeRange: null,
    brinson: {
        "fieldList": [{
            "id": "stockYield",
            "name": "股票收益"
        },
        {
            "id": "benchYield",
            "name": "基准收益"
        },
        {
            "id": "excessIncomeYield",
            "name": "超额收益"
        },
        {
            "id": "assetAllocation",
            "name": "资产配置"
        },
        {
            "id": "stockChoice",
            "name": "个股选择"
        },
        {
            "id": "mutualBenefit",
            "name": "交互收益"
        }],
        "data": {
            "stockYield": 0,
            "benchYield": 0,
            "excessIncomeYield": 0,
            "assetAllocation": 0,
            "stockChoice": 0,
            "mutualBenefit": 0
        }
    }
}

export default connect()(Brinson)
